#{extends 'main.html' /}
#{set title:'MyNewEv' /}
#{set 'moreStyles'}
  <link href="@{'/public/stylesheets/bootstrap.css'}" media="all" rel="stylesheet">
  <link href="@{'/public/stylesheets/jquery.pnotify.default.css'}" media="all" rel="stylesheet">
  <link href="@{'/public/stylesheets/jquery.pnotify.default.icons.css'}" media="all" rel="stylesheet">
  <link href="@{'/public/stylesheets/home.css'}" media="all" rel="stylesheet"> 
#{/set}
#{set 'moreScripts'}
  <script type="text/javascript" src="@{'/public/javascripts/jquery.pnotify.min.js'}"></script>  
#{/set}
	
#{if user}
<div id='cssmenu'>
<ul>
   <li class='active'><a href='/home'><span>Home</span></a></li>
   <li><a href='/category'><span>Create event</span></a></li>
   <li><a href='/myevents'><span>My events</span></a></li>
   <li><a href='/registeredevents'><span>Registered events</span></a></li>
</ul>
</div>
#{/if}
		<br/>
		<center>
		<nav-header>
			<a href="/trips"> Trips </a>
			<a href="/sports"> Sport </a>
			<a href="/culture"> Culture </a>
			<a href="/entertainment"> Entertainment </a>
			<a href="/night_life"> Night life </a>
			<a href="/learning"> Learning </a>
		</nav-header>
		</center>
		<div class="container">
			<!--<div id="adds">adds
			</div>-->
	
	
	<h2>Events</h2>

	<center>
	<table>
	#{list items:events, as:'event'}
		#{if event_parity.equals("odd")} 
			<tr>
		#{/if}
			<td>
			<a href="@{EventManager.detailedevent(event.id)}">
			<div class="eventslist" >
				<div class=${event.categoryString} #{if event_parity==odd} #{/if} >
					<h4> ${event.title} </h4>
					<div class="photo"></div>
					<p class="eventcontent">
						Author: ${event.author.userName} <br/>
						Category: ${event.category} <br/>
						Date: ${(event.eventDate).format('dd MMMM yyyy')} <br/>
						Location: ${event.location} <br/>
						Comments: ${event.comments.size()} <br/>
						Registered: ${event.registeredUsers.size()} <br/>
					</p>
				</div>
			</div>
			</a>
			</td>
		#{if event_parity.equals("even")} 
			</tr>
		#{/if}	
	#{/list}
	</table>
	</center>
	
	#{if actualEvents.size() != 0}
	    #{list items:actualEvents, as:'event'}
	       <script type="text/javascript">	                         
	       	  $(function(){	       	       
                 $.pnotify({
	                title: 'Upcoming event',
	                text: 'Please check the event <a id="ev" href="@{EventManager.selectedDetailedevent(event.id)}">\'${event.title}\'.</a>' +
	                      '\nThis event will take place ${event.date}.',
	                type: 'info'	                          
                 });                             
               });           
             </script>                          
	    #{/list}
 	#{/if}

	#{if invitations.size() != 0}
	    #{list items:invitations, as:'invitation'}
	       <script type="text/javascript">	                         
	       	  $(function(){	       	       
                 $.pnotify({
	                title: 'Invitation to an event',
	                text: 'The User ${user.userName} invite you to take part at the event ' +
	                      '<a id="ev" href="@{EventManager.detailedevent(invitation.id)}">\'${invitation.title}\'.</a>',
	                type: 'info'	                          
                 });                             
               });           
             </script>                          
	    #{/list}
 	#{/if}

	<br/>
	
</div>
